import MarkDown from "@/components/MarkDown"
import { fetchPostsDetail } from "@/services/posts/posts"
import { useRequest } from "ahooks"
import { Spin } from "antd"
import { useEffect, useState } from "react"
import { useLocation } from "umi"

export default function PostDetail() {

  const [content, setContent] = useState('')
  const location = useLocation()

  const {loading, data, run} = useRequest(fetchPostsDetail, {
    manual: true,
    onSuccess: (data) => {
      data?.content && setContent(data.content)
    }
  })

  useEffect(() => {
    const urlSearchParams = new URLSearchParams(location.search)
    const postId: string | null = urlSearchParams.get('id')
    run(postId as string)
  }, [])

  return <>
    {
      loading ? <Spin fullscreen></Spin>
      : <MarkDown content={content}></MarkDown>
    }
    
  </>
}